<template>
  <div class="articleList">
    文章列表
    <el-card class="margin30" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        条件查询
      </div>
      <!-- card body -->
      <el-form :inline="true" size="mini" :model="formData" class="demo-form-inline">
        <el-form-item label="作者">
          <el-input v-model="formData.author" placeholder="请输入作者" />
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="formData.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="编辑类型">
          <!-- select v-model 获取的结果是value绑定的结果 -->
          <el-select v-model="formData.editorType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card margin30">
      <div slot="header" class="clearfix">
        <el-button type="primary"><router-link to="/contentManage/addArticle">新增</router-link></el-button>
      </div>
      <el-table
        :data="list"
        border
      >
        <el-table-column
          prop="title"
          label="文章标题"
        />
        <el-table-column
          prop="coverImg"
          label="展示图片"
        >
          <!--

        v-slot:xx 具名插槽

        v-slot="scope"  作用域插槽
       -->
          <template v-slot="scope">
            <img style="width:100px;height:100px;" :src="scope.row.coverImg" alt="">  {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="添加时间"
        />
        <el-table-column
          prop="author"
          label="文章作者"
        />
        <el-table-column
          prop="coverImg"
          label="文章是否显示"
        >
          <!--

        v-slot:xx 具名插槽

        v-slot="scope"  作用域插槽
       -->
          <template v-slot="scope">
            <el-switch
              v-model="scope.row.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="toggle(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-link icon="el-icon-view" :underline="false" class="right30" @click="goEdit(scope.row.id)">编辑文章</el-link>
            <el-link type="danger" @click="delete1(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!--

        @size-change  pageSize 改变时会触发 每页的数量改变 limit
        @current-change currentPage 改变时会触发 start 页数改变
        :current-page  当前页数 start
        :page-size   每页的数量
       -->
      <el-pagination
        :current-page="start"
        :page-sizes="[4, 8, 12, 16]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script>
import {
  findArticles,
  changeShowStatus,
  del
} from '@/api/contentManage/articleList/index.js'
export default {
  data() {
    return {
      start: 1,
      limit: 4,
      total: 0,
      options: [{
        value: 0,
        label: '富文本'
      }, {
        value: 1,
        label: 'MarkDown'
      }],
      formData: {
        'author': '',
        'collectCount': '',
        'content1': '',
        'content2': '',
        'coverImg': '',
        'createTime': '',
        'editorType': '',
        'id': '',
        'isShow': '',
        'modifyTime': '',
        'summary': '',
        'title': '',
        'viewCount': '',
        'zanCount': ''
      },
      list: []
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    goEdit(id) {
      this.$router.push(`/contentManage/uptArticle?id=${id}`)
    },
    delete1(id) {
      console.log(1)
      del(id)
        .then(res => {
          this.init()
        })
    },
    toggle(val) {
      console.log(val)
      changeShowStatus({
        isShow: val.isShow ? 1 : 0,
        id: val.id
      })
    },
    onSubmit() {
      this.init()
    },
    init() {
      findArticles(this.start, this.limit, this.formData)
        .then(res => {
          console.log(res)
          res.data.rows.forEach(element => {
            element.isShow = !!element.isShow
          })
          this.total = res.data.total
          this.list = res.data.rows
        })
    },
    handleSizeChange(val) {
      console.log(val)
      this.limit = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(val)
      this.start = val
      this.init()
    }
  }
}
</script>

<style scoped lang="scss">
.articleList{
  .right30{
    margin-right:30px;
  }

}
</style>
